<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
        .box{
            width: 800px;
            height: 800px;
            position: relative;
            background-color: #000000;
            margin: auto;
        }
        .img{
            position: absolute;
            left:0;
            top:0;
            transform: rotateZ(0deg);
        }
        p{
        	color : #000;
        	font-size: 30px;
        	font-family: 宋体;
        	height: 30px;
        	line-height: 30px;
        	text-align: center;
        }
    </style>
	<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app">
	<p>这是一个照片墙</p>
	<div class="box">
		<img src="1.jpg" alt="" class="img" v-image>
		<img src="2.jpg" alt="" class="img" v-image>
		<img src="3.jpg" alt="" class="img" v-image>
		<img src="4.jpg" alt="" class="img" v-image>
		<img src="5.jpg" alt="" class="img" v-image>
		<img src="6.jpg" alt="" class="img" v-image>
		<img src="7.jpg" alt="" class="img" v-image>
		<img src="8.jpg" alt="" class="img" v-image>
		<img src="9.jpg" alt="" class="img" v-image>
		<img src="10.jpg" alt="" class="img" v-image>
	</div>
</div>
<script>
	Vue.directive('image',{
		inserted : function(el){//在元素插入父元素是执行此函数
			//console.log(el);
			var i = 10;
			el.onclick = function(e){
				i += 20;
				el.style.transform = 'rotateZ('+ i +'deg)';
			};
			el.onmousedown = function(e){
				console.log(1)
				var sl = e.clientX,//刚点击时的鼠标的x坐标
				    st = e.clientY,//刚点击时的鼠标的y坐标
					ol = el.offsetLeft,//物体距离定位父级的左边距
					ot = el.offsetTop,//物体距离定位父级的右边距
					l = sl - ol,//求出x两者之差
					t = st - ot;//求出y两者之差
				document.onmousemove = function(e){
					console.log('ken')
					var nl = e.clientX,
					    nt = e.clientY,
						lt = nl - l,
						tp = nt - t;
					el.style.left = lt + 'px';
					el.style.top = tp + 'px';
				};
			}
			el.onmouseup = function(){
				console.log('len')
				document.onmousemove = null;//当鼠标抬起时，把move事件去除
				el.onmousedown = null;//把down事件去除
			}
		}
	});
	var vm = new Vue({
		el : '#app',
		data : {}
	})
</script>	
</body>
</html>